<template>
  <div class="demo-icons">
    <vcu-tabs v-model:active="activeName">
      <vcu-tab title="用法" name="a">
        <basic />
        <badge />
        <pic />
        <iconfont />
      </vcu-tab>
      <vcu-tab title="图标列表" name="b">
        <list />
      </vcu-tab>
    </vcu-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import basic from "./basic.vue";
import badge from "./badge.vue";
import pic from "./picture.vue";
import iconfont from "./iconfont.vue";
import list from "./list.vue";

export default defineComponent({
  setup() {
    const activeName = ref("a");
    return { activeName };
  },
  components: {
    basic,
    badge,
    pic,
    iconfont,
    list,
  },
});
</script>

<style lang="less">
.demo-icons {
  .demo-block-slot {
    padding: 0 10px;

    .vcu-icon,
    .iconfont {
      font-size: 32px;
      margin-right: 20px;
    }
  }
}
</style>
